<template>
    <div class="addrList">
        <div class="headBtn">
            <span v-if="addrList.length && !isManage" @click="isManage = true">管理</span>
            <span v-if="addrList.length && isManage" @click="isManage = false">完成</span>
            <span @click="handleAdd()">新增</span>
        </div>
        <div v-for="item in addrList" :key="item.addrId" class="addrItem" @click="!isManage ? handleClick(item) : null">
            <div class="content">
                <div>
                    收货人：<label>{{item.receiver || '-'}}</label>
                    手机号：<label>{{item.receiverContact || '-'}}</label>
                </div>
                <div>
                    详细地址：<label>{{item.showAddr || '-'}}</label>
                </div>
                <van-icon class="checked" name="success" size="22" v-if="!isManage && (item.addrId === addrId)" />
                <van-icon name="edit" size="22" v-if="isManage" @click="handleEdit(item)" />
                <div class="tip" v-if="item.isDefaultFlag"><span>默认</span></div>
            </div>
            <div v-if="isManage" class="bottom">
                <p><van-checkbox icon-size="16px" v-model="item.isDefaultFlag" @click="handleSetDefault(item)">设为默认</van-checkbox></p>
                <p @click="handleDelete(item.addrId)">删除</p>
            </div>
        </div>
        <appEditAddressComp ref="addrRef" @refresh="queryAddrListData()" />
    </div>
</template>

<script>
    import { queryAddrList } from '@/api/srvAssurance/smarcatering/takeawayOrder';
    import appEditAddressComp from '../../../platframe/shipAddress/appEditAddressComp.vue';
    import { editAddress, delAddress } from '@api/platframe/mainFrame/address';

    export default {
        name: 'addrList',
        components: { appEditAddressComp },
        data () {
            return {
                isManage: false,
                addrId: '',
                addrList: []
            }
        },
        methods: {
            initData () {
                this.isManage = false;
            },
            // 查询收货地址列表
            queryAddrListData () {
                this.addrList = [];
                queryAddrList().then(res => {
                    if (res.code === 1000 && res.data && res.data.length) {
                        this.addrList = res.data;
                        this.addrList.forEach(val => {
                            val.isDefaultFlag = val.isDefault === '1';
                            val.showAddr = `${val.provName}${val.cityName}${val.countyName}${val.detailAddr}`;
                        })
                        this.handleClick(this.addrList.filter(item => item.isDefault === '1')[0]);
                    }
                })
            },
            handleClick (item) {
                if (this.isManage) return;
                this.addrId = item.addrId;
                setTimeout(() => {
                    this.$emit('setAddr', item);
                }, 300)
            },
            // 新增
            handleAdd () {
                if (this.addrList.length >= 10) {
                    this.$Notify({ type: 'warning', message: '收货地址已满10条，请删除后再新增！' });
                    return;
                }
                this.$refs.addrRef.getData({ key: 'add' });
            },
            // 修改
            handleEdit (item) {
                let data = {
                    ...item,
                    isDefault: item.isDefault === '1'
                };
                this.$refs.addrRef.getData({ key: 'edit', val: data });
            },
            // 设为默认
            handleSetDefault (item) {
                if (item.isDefault === '1') return;
                let params = { ...item };
                params.isDefault = '1';
                editAddress(params).then(res => {
                    if (res.code === 1000) {
                        this.$Notify({ type: 'success', message: '设置成功！' });
                        this.queryAddrListData();
                    }
                })
            },
            // 删除
            handleDelete (addrId) {
                this.$Dialog
                    .confirm({
                        title: "是否确定删除该地址？",
                    })
                    .then(() => {
                        delAddress({ addrIdList: addrId }).then(res => {
                            if (res && res.code === 1000) {
                                this.$Notify({ type: 'success', message: '删除成功！' });
                                this.queryAddrListData();
                            }
                        })
                    })
                    .catch(() => { });
            }
        }
    }
</script>

<style scoped lang="less">
    .headBtn {
        position: absolute;
        right: 40px;
        top: 12px;
        font-size: 13px;
        color: #00a9ff;
        span {
            margin-left: 8px;
        }
    }
    .addrList {
        padding: 8px;
        overflow: auto;
        background: #eee;
        box-sizing: border-box;
        height: 100%;
        .addrItem {
            margin-bottom: 8px;
            box-shadow: 0px 3px 9px rgba(27, 93, 213, 0.1);
            border-radius: 3px;
            overflow: hidden;
            .content {
                background: #fff;
                position: relative;
                box-sizing: border-box;
                height: auto;
                min-height: 70px;
                white-space: normal;
                padding: 5px 50px 5px 10px;
                color: #999;
                font-size: 13px;
                line-height: 20px;
            }
            label {
                color: #333;
                margin-right: 8px;
            }
            .van-icon {
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
                z-index: 99;
            }
            .checked {
                color: #19be6b;
            }
            .tip {
                position: absolute;
                right: 0;
                top: 0;
                border: 18px solid #19be6b;
                border-color: #19be6b #19be6b transparent transparent;
                span {
                    color: #fff;
                    position: absolute;
                    font-size: 11px;
                    width: 30px;
                    left: -5px;
                    top: -12px;
                    transform: rotate(45deg);
                }
            }
            .bottom {
                border-top: 1px solid #eee;
                padding: 5px 10px;
                background: #fff;
                display: flex;
                justify-content: space-between;
                font-size: 12px;
                line-height: 25px;
                color: #666;
            }
        }
    }
</style>